<template>
  <div class="app-container">
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"/>
      <span class="font-small">{{$t('基本信息')}}</span>
    </div>

    <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-name"><i class="el-icon-s-release"></i> {{$t('退款编号')}}</el-col>
          <el-col :span="18" align="left" class="table-cell-content">
            {{refundDetail.refundSn}}&nbsp;
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-name"><i class="el-icon-s-order"></i> {{$t('Order_ID')}}</el-col>
          <el-col :span="18" align="left" class="table-cell-content">
            {{refundDetail.orderSn}}&nbsp;
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-name"><i class="el-icon-time"></i> {{$t('Submission_time')}}</el-col>
          <el-col :span="18" align="left" class="table-cell-content">
            {{refundDetail.addTime}}&nbsp;
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-name"><i class="el-icon-user"></i> {{$t('Member_account')}}</el-col>
          <el-col :span="18" align="left" class="table-cell-content">
            {{refundDetail.userName}}&nbsp;
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-name"><i class="el-icon-share"></i> {{$t('退款方式')}}</el-col>
          <el-col :span="18" align="left" class="table-cell-content">
            {{ payTypeFilter(refundDetail.refundType)}}&nbsp;
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-name">{{$t('处理门店')}}</el-col>
          <el-col :span="18" align="left" class="table-cell-content">
            {{refundDetail.refundShopName}}&nbsp;
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-name">{{$t('操作员')}}</el-col>
          <el-col :span="18" align="left" class="table-cell-content">
            {{refundDetail.operationName}}&nbsp;
          </el-col>
        </el-row>
      </div>

    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"/>
      <span class="font-small">{{$t('Goods_details_info')}}</span>
    </div>
    <div class="table-layout">
      <el-table :data="refundDetail.goodsLs" border fit highlight-current-row>
        <el-table-column align="center" :label="$t('商品名称')" prop="goodsName" />
        <el-table-column align="center" :label="$t('Merchandise_code')" prop="goodsSn" />
        <el-table-column align="center" :label="$t('Goods_specifications')" prop="specAndAccessory" />
        <el-table-column align="center" :label="$t('Products')" prop="number">
          <template slot-scope="scope">
              <div>{{scope.row.number}}</div>
              <div v-if="scope.row.refundNumber > 0">{{$t('Refunded')}}{{scope.row.refundNumber}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('单价')" prop="sellingPrice">
          <template slot-scope="scope">
            {{scope.row.sellingPrice | floorTwoDecimal}}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('优惠金额')" >
          <template slot-scope="scope">
              {{scope.row.sellingPrice - scope.row.discountPrice | floorTwoDecimal}}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('实付单价')" prop="discountPrice">
          <template slot-scope="scope">
            {{scope.row.discountPrice | floorTwoDecimal}}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('实付总金额')" prop="discountGoodsPrice">
          <template slot-scope="scope">
            {{scope.row.discountGoodsPrice | floorTwoDecimal}}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('税费')" prop="taxs">
          <template slot-scope="scope">
            <div>{{scope.row.taxPrice | floorTwoDecimal}}</div>
            <div v-for="tax in scope.row.taxs" :key="tax.id">
              {{tax.code}}({{tax.value}}%)：{{tax.price | floorTwoDecimal}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('合计')" prop="price">
          <template slot-scope="scope">
            {{scope.row.price | floorTwoDecimal}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <br/>

    <el-row>
      <el-col :span="6" :offset="18"><div class="grid-content bg-purple">{{$t('商品金额')}}：{{refundDetail.goodsPrice | floorTwoDecimal}}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="18"><div class="grid-content bg-purple">{{$t('税费')}}：{{refundDetail.taxPrice | floorTwoDecimal}}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="18"><div class="grid-content bg-purple">{{$t('实付总金额')}}：{{refundDetail.actualPrice | floorTwoDecimal}}</div></el-col>
    </el-row>

  </div>
</template>

<script>
import { orderRefundDetail } from '@/api/order'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import checkPermission from '@/utils/permission' // 权限判断函数
import { allForPerm } from '@/api/shop'
import store from '@/store'

export default {
  name: 'refundDetails',
  components: { Pagination },
  filters: {

  },
  data() {
    const payTypeMap = {
      1: this.$t('现金支付'),
      2: this.$t('礼物卡支付'),
      3: this.$t('PayPal支付'),
      4: this.$t('余额支付'),
      5: this.$t('Clover支付')
    }

    return {
      // 当前店铺
      shop: store.state.user.shop,
      payTypeMap,
      refundDetail: {},
    }
  },
  created() {
    const id = this.$route.query.id
    // 详情
    orderRefundDetail(id).then(response => {
      this.refundDetail = response.data.data
    }).catch(response => {
      this.$notify.error({
        title: this.$t('Failed'),
        message: this.$t(response.data.errmsg)
      })
    })
  },
  methods: {
    checkPermission,
    payTypeFilter(type){
      return this.payTypeMap[type]
    }
  }
}
</script>

<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }

  .table-cell-name {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    font-size: 14px;
    color: #303133;
  }

  .table-cell-content {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #303133;
  }

  .grid-content {
    padding: 5px;
    text-align: right;
  }
</style>
